<template>
  <div>
    <template v-if="showDialog">
      <el-dialog :title="title" top="5vh" custom-class="course-dialog" :close-on-click-modal="false" :visible="true" width="90%"
        @close="handleClose">
        <el-form :model="form" label-width="100px" class="form-type">
          <el-form-item label="习题类型" required>
            <el-select v-model="form.type" placeholder="请选择习题类型" @change="onChangeType" :disabled="true">
              <el-option v-for="(item, index) in types" :key="item.type" :label="item.title" :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="question-list">
          <div class="question-item" v-for="(item, index) in questionList" :key="index">
            <el-form label-width="100px">
              <el-form-item label="类型" required>
                <el-select :disabled="setDisabled(item)" v-model="item.question_type" placeholder="请选择类型"
                  @change="onChangeQuestionType">
                  <el-option v-for="(ite, key) in questionType" :key="ite.type" :label="ite.title" :value="ite.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <question-fill v-if="item.question_type === 1" :ref="'fill-' + index" :question-type="item.question_type"
              :disabled="disabled" :info="item">
            </question-fill>
            <question-fills v-if="item.question_type === 2" :ref="'fills-' + index" :question-type="item.question_type"
              :disabled="disabled" :info="item">
            </question-fills>
            <div class="delete-button">
              <el-button size="mini" icon="el-icon-delete" circle @click="handleClickDelete(item, index)"></el-button>
            </div>
            <div class="order-number">
              {{ index + 1 }}
            </div>
          </div>
          <div class="add-button">
            <el-button type="primary" size="big" icon="el-icon-plus" @click="handleClickAdd">添加习题</el-button>
          </div>
        </div>




        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </template>

    <template v-if="!showDialog">
      <el-form :model="form" label-width="100px" class="form-type">
        <el-form-item label="习题类型" required>
          <el-select v-model="form.type" placeholder="请选择习题类型" @change="onChangeType" :disabled="disabled">
            <el-option v-for="(item, index) in types" :key="item.type" :label="item.title" :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="question-list">
        <div class="question-item" v-for="(item, index) in questionList" :key="index">
          <el-form label-width="100px">
            <el-form-item label="类型" required>
              <el-select :disabled="disabled" v-model="item.question_type" placeholder="请选择类型"
                @change="onChangeQuestionType">
                <el-option v-for="(ite, key) in questionType" :key="ite.type" :label="ite.title" :value="ite.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <question-fill v-if="item.question_type === 1" :ref="'fill-' + index" :question-type="item.question_type"
            :disabled="disabled" :info="item">
          </question-fill>
          <question-fills v-if="item.question_type === 2" :ref="'fills-' + index" :question-type="item.question_type"
            :disabled="disabled" :info="item">
          </question-fills>
          <div class="order-number">
            {{ index + 1 }}
          </div>
        </div>
      </div>
    </template>


  </div>
</template>

<script>
import QuestionFill from './QuestionFill.vue'
import QuestionFills from './QuestionFills.vue'
import { conmitCocourseQuestions } from "@/api/course";
export default {
  components: {
    QuestionFill,
    QuestionFills,
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    reviewList: {
      type: Array,
      default() {
        return [];
      }
    },
    type: {
      type: Number
    },
    showDialog: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '添加习题'
    }
  },
  watch: {
    type: {
      handler(type) {
        this.form.type = type;
      },
      immediate: true,
      deep: true,
    },
    reviewList: {
      handler(list) {
        this.questionList = JSON.parse(JSON.stringify(list))
      },
      immediate: true,
      deep: true,
    }
  },
  computed: {

  },
  data() {
    return {
      list: [],
      dialogTitle: '添加习题',
      types: [
        {
          title: '课前习题',
          type: 1
        },
        {
          title: '课后练习',
          type: 3
        }
      ],
      questionType: [
        {
          type: 1,
          title: '普通选择题'
        },
        {
          type: 2,
          title: '多项选择题'
        }
      ],
      form: {
        name: "",
        type: "",

      },
      questionList: [
        {
          question_type: ""
        }
      ]


    }
  },
  created() {
  },
  methods: {
    async conmitCocourseQuestions() {
      if (!this.handleVerify()) {
        return false;
      }
      let res = await conmitCocourseQuestions({
        question_category: this.type,
        course_question_set_id: this.$route.query.id,
        list: JSON.stringify(this.list)
      })
      this.$message({
        message: '操作成功！',
        type: 'success'
      });
      this.$emit('success')
    },
    handleVerify() {
      let temp = true;
      let error = '';
      console.log(0)
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i];
        if (item.question_stem === '') {
          temp = false;
          error = `第${i + 1}题：请填写题干！`
          break;
        }
        if (item.question_type === 1) {

          if (item.is_direct === '') {
            temp = false;
            error = `第${i + 1}题：请设置是否定向！`
            break;
          }
          let noselect = item.question_select.some(ite => {
            return ite.title === '';
          })
          if (noselect) {
            temp = false;
            error = `第${i + 1}题：请填写选项！`
            break;
          }
          if (item.right_answer.length === 0) {
            temp = false;
            error = `第${i + 1}题：请设置正确答案！`
            break;
          }
        }
        

      

      }
      if (temp === false) {
        this.$message({
          message: error,
          type: 'warning'
        });
        return false;
      }

      return true;

    },
    handleForm() {
      let refs = this.$refs;
      this.list = [];
      console.log(refs)
      for (let key in refs) {
        if (key.indexOf('fill') !== -1 && refs[key].length === 1) {
          this.list.push(JSON.parse(JSON.stringify(refs[key][0].form)))
        }

      }
      console.log(this.list)
      this.conmitCocourseQuestions();
    },
    handleConfirm() {
      this.handleForm();
    },
    handleClose() {
      this.$emit('close')
    },
    handleClickAdd(item, index) {
      this.questionList.push({ question_type: '' })
    },
    handleClickDelete(item, index) {
      this.questionList.splice(index, 1)
    },
    onChangeType(value) {

    },
    onChangeQuestionType() {

    },
    setDisabled(item) {
      if (item.id) {
        return true
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.form-type {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee
}

.question-list {
  .question-item {
    position: relative;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    overflow: hidden;

    .delete-button {
      position: absolute;
      top: 5px;
      right: 5px;
    }

    .order-number {
      position: absolute;
      left: -5px;
      top: -5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #eee;
      background-color: #eee;
      font-weight: bold;
      border-radius: 45%;
      text-align: center;
    }
  }
}

.add-button {
  text-align: center;
}



</style>
<style>
.course-dialog{
  height:90vh
}
.course-dialog .el-dialog__body{
    height:72vh;
    overflow-y:scroll
}
</style>